<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车页</title>
    <link rel="stylesheet" href="css/gouwuche.css">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="js/jquery1.11.js"></script>
</head>
<body>
    <div id="banner">
        <a href="">
            <img src="img/0.jpg" alt="">
        </a>
    </div>
    <div id="nav-wrap">
        <div id="nav">
            <img class="img1" src="img/home.png" alt="">
            <a href="shouye.html">第五大道首页</a>
            <img class="img2" src="img/phone.png" alt="">
            <p>贵宾专线：4008-6767-38</p>
            <ul>
                <li class="li1"><a href="denglu.html">登录</a></li>
                <li> <img src="img/youli.gif" alt=""><a href="zhuce.html">注册</a></li>
                <li><a href="">我的第五大道</a></li>
                <li><a href="">帮助中心</a></li>
                <li><a href="">手机版下载</a></li>
            </ul>
        </div>
    </div>
    <div id="search-wrap">
        <div id="search">
           <a href="shouye.html"> <img class="img1" src="img/wudadaologo.jpg" alt=""></a>
            <img class="img2" src="img/yijian.jpg" alt="">
            <div id="search-mid">
                <div id="search-mid-top">
                    <input class="search-btn1" type="text" placeholder="太阳镜">
                    <input class="search-btn2" type="button" value="搜&nbsp;索">
                </div>
                <ul>
                    <li class="li1">连衣裙</li>
                    <li>美妆</li>
                    <li>运动户外</li>
                    <li>箱包</li>
                    <li>配饰</li>
                    <li>腕表</li>
                </ul>
            </div>
            <div id="search-right">
                <img class="img3" src="img/hua.png" alt="">
                <p>第五大道海外生活</p>
            </div>
        </div>
    </div>
    <div id="meun-wrap">
        <div id="meun">
            <div class="li1"><a href="liebiao.html">商品分类</a></div>
            <ul>
                <li><a href="">品牌</a></li>
                <li><a href="">最新</a></li>
                <li><a href="">女士</a></li>
                <li><a href="">男士</a></li>
                <li><a href="">生活馆</a></li>
                <li><a href="">海外馆</a></li>
                <li><a href="">时尚</a></li>
                <li><a href="">特惠</a></li>
                <li><a href="">礼品区</a></li>
                <li class="li2"><a href=""><img src="img/logo0.png" alt=""><span>到店</span></a></li>
                <li class="li3"><a href=""><img src="img/overseaslogo.gif" alt=""></a></li>
                <li class="li4"><a href=""><img src="img/logo1.png" alt=""></a></li>
                <li class="li5"><a href=""><img src="img/logo2.png" alt=""></a></li>
                <li class="li6"><a href=""><img src="img/logo3.png" alt=""></a></li>
            </ul>
        </div>
    </div>
   <div id="cart_top-wrap">
    <div id="cart_top">
        <ul>
            <li><input type="checkbox"  id="btn1">全选</li>
            <li>商品图</li>
            <li>商品名称</li>
            <li>商品单价</li>
            <li>购买数量</li>
            <li>小计</li>
            <li>操作</li>
        </ul>
    </div>
   </div>
    <div id="cart-wrap">
        <div id="cart">
          
        </div>
    </div>
    <div id="zongjia-wrap">
        <div id="zongjia">
            总价：
        </div>
    </div>
 <script>
         function loadData() {
            let url = 'http://jx.xuzhixiang.top/ap/api/cart-list.php'
            let uid = localStorage.getItem('uid')
            let token = localStorage.getItem('token')

            axios.get(url, {
                params: {
                    id:	"45121"
                }
            }).then(res => {
                console.log(res.data.data);
                // 商品数组
                let arr = res.data.data;
                let html = '';
                let zongjia="";

                arr.forEach(obj => {
                    html +=
                    `<div class="col">
                        <input type="checkbox"  id="BTN" class="BTN">
                        <a href="xiangqing.html?id=${obj.pid}"><img src="${obj.pimg}" alt=""></a>
                    <p>${obj.pname}</p>
                    <p>${obj.pprice}</p>

                    <p><input type="button"  id="BTN1" value="-">${obj.pnum}<input type="button"  id="BTN2" value="+"></p>
                    <p>${obj.pnum*obj.pprice}</p>
                    <button class="BT">删除</button>
                    </div>`
                    
                })
                $("#cart").html(html)
                // $(".BT").click(function(){
                //     $(this).parent().remove()
                // })
                deleteProduct()
            })
        }
        loadData()
        function deleteProduct() {
            let deleteBtns = document.querySelectorAll('.BT');
            for (let i = 0; i < deleteBtns.length; i++) {
                deleteBtns[i].onclick = function () {
                    //调用删除接口
                    let uid = localStorage.getItem('uid')
                    let token = localStorage.getItem('pid')
                    // pid  按钮上 属性里面
                    let pid = this.getAttribute('data-id')
                    let url = 'http://jx.xuzhixiang.top/ap/api/cart-delete.php'
                    axios.get(url, {
                        params: {
                            uid, pid, 
                        }
                    }).then(res => {
                        console.log(res.data);
                        // 刷新页面 ， loadData  ，this.父元素 。remove（）
                        this.parentNode.remove()
                    })
                }
            }
            var totoalchoose=document.querySelector("#btn1");
            var achoose = document.querySelectorAll('.BTN'); 
            console.log(achoose.length)
           
            totoalchoose.onclick = function() {
                for (let j = 0; j < achoose.length; j++) {
                    if (totoalchoose.checked) {
                        achoose[j].checked = true;
                    } else {
                        achoose[j].checked = false;
                    }
                }
            }

            for (let i = 0; i < achoose.length; i++) {
                let flag = true;
                if (!achoose[i].checked) {
                    flag = false;
                    break;
                }
                totoalchoose.checked = flag;
            }

            for (let j = 0; j < achoose.length; j++) {
                achoose[j].onclick = function() {
                    let flag = true;
                    for (let i = 0; i < achoose.length; i++) {
                        if (!achoose[i].checked) {
                            flag = false;
                            break;
                        }
                    }
                    totoalchoose.checked = flag;
                }
            }
        }
    </script>

    <div class="bottom">
        <ul>
            <li>
                <img src="img/9.jpg" alt="">
                <div>
                    <p class="P1">正品保障</p>
                    <p class="P2">品牌授权，官方验真</p>
                </div>
            </li>
            <li>
                <img src="img/10.jpg" alt="">
                <div>
                    <p class="P1">专柜发货</p>
                    <p class="P2">专柜直接或到店自提</p>
                </div>
            </li>
            <li>
                <img src="img/11.jpg" alt="">
                <div>
                    <p class="P1">无忧售后</p>
                    <p class="P2">7天无理由退换货</p>
                </div>
            </li>
            <li>
                <img src="img/12.jpg" alt="">
                <div>
                    <p class="P1">VIP服务</p>
                    <p class="P2">享品牌会员售前售后服务</p>
                </div>
            </li>
            <li>
                <img src="img/13.jpg" alt="">
                <div>
                    <p class="P1">权威荣誉</p>
                    <p class="P2">商务部授予诚信示范企业</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="footer">
        <ul>
            <li class="li0">
                <span class="span1">服务保障</span>
                <span>品牌授权正品</span>
                <span>品牌客服</span>
                <span>预约到店体验</span>
                <span>7天无理由退换</span>
            </li>
            <li>
                <span class="span1">使用帮助</span>
                <span>品牌授权正品</span>
                <span>品牌客服</span>
                <span>预约到店体验</span>
                <span>7天无理由退换</span>
            </li>
            <li>
                <span class="span1">支付方式</span>
                <span>品牌授权正品</span>
                <span>品牌客服</span>
                <span>预约到店体验</span>
                <span>7天无理由退换</span>
                <span>分期付款</span>
            </li>
            <li>
                <span class="span1">配送方式</span>
                <span>品牌授权正品</span>
                <span>品牌客服</span>
                <span>预约到店体验</span>
                <span>7天无理由退换</span>
            </li>
            <li>
                <span class="span1">售后服务</span>
                <span>品牌授权正品</span>
                <span>品牌客服</span>
                <span>预约到店体验</span>
                <span>7天无理由退换</span>
            </li>
            <li class="li1">
                <span class="span1">第五大道APP</span>
                <img src="img/14.jpg" alt="">
            </li>
            <li class="li2">
                <span class="span1">第五大道微博</span>
                <img src="img/14.jpg" alt="">
            </li>
        </ul>
    </div>
    <div class="copy">
        <div class="copy-1">
            <ul>
                <li><a href="">箱包</a></li>
                <li><a href="">美妆</a></li>
                <li><a href="">服饰</a></li>
                <li><a href="">腕表</a></li>
                <li><a href="">配饰</a></li>
                <li><a href="">鞋靴</a></li>
                <li><a href="">特惠</a></li>
                <li class="LI"><a href="">礼品区</a></li>
            </ul>
        </div>
        <div class="copy-2">
            <ul>
                <li>关于第五大道</li>
                <li>网站地图</li>
                <li>品牌合作专区</li>
                <li>媒体聚焦</li>
                <li>商务合作</li>
                <li>商家合作</li>
                <li>加入第五大道</li>
                <li>友情链接</li>
                <li>奢尚志</li>
                <li>联系我们</li>
                <li>投诉建议</li>
            </ul>
        </div>
        <div class="copy-3">
            <p>Copyright © 2008-2014 瑞美嘉信国际信息技术（北京）有限公司 版权所有京ICP备09012701号 京公网安备 11010102003747号 丨营业执照</p>
        </div>
    </div>
    <div class="right">
        <ul>
            <li><a href="gouwuche.html"><img src="img/gouwu.png" alt=""></a></li>
            <li><img src="img/ka.png" alt=""></li>
            <li><img src="img/xin.png" alt=""></li>
            <li><img src="img/kefu.png" alt=""></li>
            <li class="li4"><img src="img/weixin.png" alt=""></li>
            <li><img src="img/bi.png" alt=""></li>
            <li><img src="img/dianhua.png" alt=""></li>
            <li id="puttop"><img src="img/top.png" alt=""></li>
        </ul>
    </div>
    <script>
        var puttop=document.querySelector("#puttop");
        puttop.onclick=function(){
            document.documentElement.scrollTop=document.body.scrollTop=0;
        }
    </script>
</body>
</html>